<template>
  <editor
    :disabled="is"
    api-key="dg5d672vo5ursutvekse2emgfz37060mc5p8mxdaovabvo53"
    :init="editorInit"
    v-model="contentHtml"
  />
</template>

<script>
import Editor from "@tinymce/tinymce-vue";

export default {
  name: "tinymce",
  components: {
    editor: Editor,
  },
  model: {
    prop: "content",
    event: "change",
  },
  props: {
    // 绑定的文本内容
    content: {
      type: String,
      default: "",
    },
    IS: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      // 编辑器配置
      editorInit: {
        language_url: "/zh_CN.js", //汉化文件的路径, 这里的原始路径是'/public/zh_CN.js'
        language: "zh_CN",
        height: 500,
        menubar: true,
        plugins: [
          "advlist autolink lists link image charmap print preview anchor",
          "searchreplace visualblocks code fullscreen",
          "insertdatetime media table paste help wordcount",
          "image quickbars",
        ],
        toolbar:
          "undo redo | formatselect | bold italic backcolor | \
           alignleft aligncenter alignright alignjustify | \
           bullist numlist outdent indent | removeformat | image table",
        branding: false,

        // 自定义图片上传
        // images_upload_handler: async (blobInfo,success,failure) => {
        //   console.log(blobInfo,success,failure);
        //   try {
        //     const fileObj=blobInfo.blob(); //类似 input:file 获取到的文件对象
        //     const res=await apiUploadFile(fileObj); //自定义的后端接口
        //     const imageUrl=res;

        //     // success方法接受一个图片地址,然后在内容中追加图片元素
        //     success(imageUrl);
        //   } catch(err) {
        //     failure(err&&err.msg? err.msg:"上传失败");
        //   }
        // },
      },
      is: false,
      contentHtml: "",
      updateTimer: null, //防抖
    };
  },
  //   created () {

  //   },
  watch: {
    IS: {
      handler: function (valueFromParent) {
        // 由父组件自动修改的内容,同步到子组件
        // console.log(valueFromParent);
        this.is = valueFromParent;
        //  tinymce.activeEditor.getBody().setAttribute('contenteditable',false);
      },
      immediate: true,
    },
    content: {
      handler: function (valueFromParent) {
        // 由父组件自动修改的内容,同步到子组件
        // console.log(valueFromParent);
        // console.log(this.contentHtml);
        if (valueFromParent !== this.contentHtml) {
          this.contentHtml = valueFromParent;
        }
      },
      immediate: true,
    },

    contentHtml(valueFromChild = "") {
      // 向父组件派发change事件
      if (valueFromChild !== this.content) {
        this.updateTimer && clearTimeout(this.updateTimer);
        this.updateTimer = setTimeout(() => {
          this.$emit("change", valueFromChild);
        }, 500);
      }
    },
  },
  mounted() {
    // tinymce.init({});
  },
  beforeDestroy() {
    this.updateTimer && clearTimeout(this.updateTimer);
    this.contentHtml = "";
  },
};
</script>

<style lang="scss">
.tox-tinymce-aux {
  z-index: 5000 !important;
}
.tox-notification--warning {
  display: none !important;
}
.tox-notification--warn {
  display: none !important;
}
</style>
